<template>
  <div>
显示消息：{{mes}}
  <!-- <el-input v-model='sendsms'></el-input>
  <el-button @click='send'>submit</el-button> -->
    <div class="table-box">
  <van-row class="th-row">
    <van-col :span="24/dataList.title.length" v-for="warn in dataList.title" :key="warn">
      {{warn}}
    </van-col> 
  </van-row>
  <van-row class="tb-row" v-for="(wb,index) in mes" :key="index" 
  :style="{background:wb.status === 1 ?'#fff':'#FF0000'}">
   <van-col :span="24/Object.keys(wb).length" v-for="item in Object.keys(wb)" :key="item">{{wb[item]}} </van-col>
  </van-row>

</div>

  </div>
</template>

<script>
export default{
	data(){
		return{

			dataList:{
	        title:['id','名字','最小温度','最大温度','状态','当前温度']
          
	      },
        mes:[],
        ws:'',
        sendsms:'',
        color:'red'
		}
	},
    methods:{
      initWeb(){
        this.ws = new WebSocket("ws://localhost:8000/ws?id=1")
        this.ws.onopen = function(){
          alert('success')
        }
        this.ws.onmessage=(data)=>{
          this.mes = JSON.parse(data.data) 
        }
        this.ws.onclose=function(){
          alert('close')
        }
      },
    send(){
      this.axios.get('http://127.0.0.1:8000/greenhouse?id=1')
    }
        
    },
  mounted(){
    this.initWeb()
    this.send()
  }
}

</script>

<style>
.table-box{
   margin: 12px 0px;}
   .th-row{
     height: 56px;
     line-height: 56px;
     background: #EBF1F7;
     padding: 0px 12px;
   }
   .tb-row{
     height: 56px;
     line-height: 56px;
     padding: 0px 12px;
   }
 


</style>